<template>
  <div>
    <div class="strategyFatherBox">
      <el-button type="success" size='small' @click="dialogVisible(null, policyType)" class="addClick">{{$t('添加')}}</el-button>
      <el-button type="danger" size='small' @click="deleteData" class="delClick">{{$t('删除')}}</el-button>
      <el-button type="success" size='small' @click="rePolicy" class="safe">{{$t('安全引擎重载')}}</el-button>
      <span style="margin-left:10px;" class="changePolicyModeSwitch">{{$t('阻断模式：')}}
        <el-switch :width="lang === 'zh'?70:80" v-model="policyType" class="policyType switch" @change="changePolicyMode" active-color="#009966" inactive-color="#CCCCCC" active-value="whitelist" inactive-value="blacklist" :active-text="$t('白名单')" :inactive-text="$t('黑名单')"></el-switch>
      </span>
      <!-- <span style="margin-left:10px;" class="changeRuldModeSwitch">匹配模式：
        <el-switch :width="lang === 'zh'?70:80" v-model="RuldType" class="RuldType switch" @change="changeRuldMode" active-color="#009966" inactive-color="#CCCCCC" active-value="singlerule" inactive-value="multiplerule" :active-text="$t('单规则')" inactive-text="$t('多规则')"></el-switch>
      </span> -->
      <span style="margin-left:10px;" class="changeUnmatchModeSwitch" v-if="policyType === 'whitelist'">{{$t('未命中日志：')}}
        <el-switch :width="45" v-model="UnmatchType" class="UnmatchType switch" @change="changeUnmatchMode" active-color="#009966" inactive-color="#CCCCCC" active-value="on" inactive-value="off" :active-text="$t('开')" :inactive-text="$t('关')"></el-switch>
      </span>
    </div>
    <el-table size='mini' ref="multipleTable" :data="policyList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="name" :label="$t('策略ID')" align='center' width="80">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.id" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('名称')" align='center' width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.name" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="action" align='center' :label="$t('动作')" width="100">
        <template slot-scope="scope">
          {{  $t('eventaction.' + actionList[scope.row.action]) }}
        </template>
      </el-table-column>
      <el-table-column prop="sip" align='center' :label="$t('源IP')" width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.sip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dip" align='center' :label="$t('目的IP')" width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="service" align='center' :label="$t('服务')" width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.service" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="packet" align='center' :label="$t('包统计')" width="130"></el-table-column>
      <el-table-column prop="enable" align='center' :label="$t('策略使能')" width="120">
        <template slot-scope="scope">
          {{ $t(enableList[scope.row.enable]) }}
        </template>
      </el-table-column>
      <el-table-column prop="log" align='center' :label="$t('日志使能')" width="100">
        <template slot-scope="scope">
          {{  $t(logList[scope.row.log]) }}
        </template>
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="app" align='center' :label="$t('应用')" width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.app" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="user" align='center' :label="$t('用户')" width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.user" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="iptype" align='center' :label="$t('IP类型')" width="100"></el-table-column>
      <el-table-column prop="szone" align='center' :label="$t('源区域')" width="110">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.szone" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dzone" align='center' :label="$t('目的区域')" width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dzone" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="smac" align='center' :label="$t('源MAC')" width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.smac" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dmac" align='center' :label="$t('目的MAC')" width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dmac" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="sport" align='center' :label="$t('源端口')" width="100"></el-table-column>
      <el-table-column prop="right" align='center' fixed="right" :label="$t('操作')" width="150">
        <template slot-scope="scope">
          <el-button type="success" :class="'edit' + (scope.$index + 1)" plain size="mini" @click="dialogVisible(scope.row, policyType)">{{$t('编辑')}}</el-button>
          <el-button type="primary" :class="'remove' + (scope.$index + 1)" plain size="mini" @click="moveChangeDialogVisible(scope.row)">{{$t('移动')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <strategy-dialog v-if="strategyDialogVisible" :policyTypeInner='policyType' ref="refStrategyDialogVisible"></strategy-dialog>
    <move-dialog v-if="moveDialogVisible" ref="refMoveDialogVisible"></move-dialog>
  </div>
</template>
<script>
import {
  getPolicyArray,
  delPolicy,
  reloadPolicy,
  getPolicyMode,
  editPolicyMode,
  getUnmatchMode,
  changeUnmatchMode,
  // getRuldMode,
  changeRuleMode,
  reloadPolicyShow
} from '@/api/safe/access/strategy'
import StrategyDialog from './components/StrategyDialog'
import moveDialog from './components/moveDialog'
// import 'view-design/dist/styles/iview.css'
export default {
  name: 'Strategy',
  components: {
    StrategyDialog,
    moveDialog
  },
  data () {
    return {
      strategyDialogVisible: false,
      moveDialogVisible: false,
      policyList: [],
      nameStr: '',
      policyType: 'whitelist',
      RuldType: 'singlerule',
      UnmatchType: 'on',
      actionList: {
        'ACCEPT': '允许',
        'se': '安全引擎',
        'DROP': '丢弃',
        'REJECT': '拒绝'
      },
      enableList: {
        'yes': '开',
        'no': '关'
      },
      logList: {
        'on': '开',
        'off': '关'
      },
      rePolicyInstance: null,
      timer: null,
      faultText: '',
      lang: this.$i18n.locale
    }
  },
  beforeDestroy () {
    if (this.rePolicyInstance) {
      this.rePolicyInstance.close()
      this.rePolicyInstance = null
    }
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  mounted () {
    this.listData()
    getPolicyMode().then(res => {
      if (res.status === 0 && res.info[0]) {
        this.policyType = res.info[0].policymode
      }
    })
    // getRuldMode().then(res => {
    //   if (res.status === 0 && res.info[0]) {
    //     this.RuldType = res.info[0].modify_mode ? 'singlerule' : 'multiplerule'
    //   }
    // })
    getUnmatchMode().then(res => {
      if (res.status === 0 && res.info[0]) {
        this.UnmatchType = res.info[0].matchlog
      }
    })
    this.reloadPolicyMessage()
    let _that = this
    this.timer = setInterval(function () {
      _that.reloadPolicyMessage()
    }, 5 * 1000)
  },
  methods: {
    // 多选按钮
    handleSelectionChange (data) {
      var nameStr = ''
      for (var item of data) {
        if (nameStr === '') {
          nameStr = item.name
        } else {
          nameStr = nameStr + '@#@' + item.name
        }
      }
      this.nameStr = nameStr
    },
    // 列表
    listData () {
      getPolicyArray().then(res => {
        if (res.status === 0) {
          this.policyList = res.info
        }
      })
    },
    // 添加按钮表单
    dialogVisible (data, policyType) {
      this.strategyDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refStrategyDialogVisible.init(data, policyType)
      })
    },
    // 移动按钮表单
    moveChangeDialogVisible (data) {
      this.moveDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refMoveDialogVisible.init(data)
      })
    },
    deleteData () {
      if (this.nameStr) {
        this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
          closeOnClickModal: false,
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          confirmButtonClass: 'confirmButton',
          cancelButtonClass: 'confirmCancelButton',
          type: 'warning'
        }).then(() => {
          delPolicy({ name: this.nameStr }).then(res => {
            if (res.status === 0) {
              this.$messages.success(this.$t('删除成功'))
              this.nameStr = ''
              this.listData()
            }
            if (res.info && res.info[0] && res.info[0].reload === 'yes') {
              this.openTip()
            }
          })
        })
      } else {
        this.$messages.error(this.$t('请至少选择一条数据进行删除'))
      }
    },
    rePolicy () {
      this.$confirm(this.$t('确认要进行安全引擎重载？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        reloadPolicy().then(res => {
          if (res.status === 0) {
            this.$messages.success(this.$t('重载成功'))
            this.listData()
          }
        })
      })
    },
    changePolicyMode (data) {
      var info = data === 'whitelist' ? this.$t('白名单命名模式下,不配置任何策略时默认阻断所有数据包,同时将清除所有策略,确认切换到白名单模式?') : this.$t('黑名单命名模式下,不配置任何策略时默认放行所有数据包,同时将清除所有策略,确认切换到黑名单模式?')
      this.$confirm(info, this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        editPolicyMode({ mode: data }).then(res => {
          if (res.status === 0) {
            const msg = '当前' + (data === 'whitelist' ? '白' : '黑') + '名单模式'
            this.$messages.success(this.$t(msg))
            this.listData()
          }
        }).catch(() => {
          this.policyType = this.policyType === 'whitelist' ? 'blacklist' : 'whitelist'
          const msg  = '当前' + (this.policyType === 'whitelist' ? '白' : '黑') + '名单模式'
          this.$messages.info(this.$t(msg))
        })
      }).catch(() => {
        this.policyType = this.policyType === 'whitelist' ? 'blacklist' : 'whitelist'
        const msg = '当前' + (this.policyType === 'whitelist' ? '白' : '黑') + '名单模式'
        this.$messages.info(this.$t(msg))
      })
    },
    changeRuldMode (data) {
      var info = data === 'singlerule' ? this.$t('单规则匹配模式下,数据包命中某条策略后,后续策略不再匹配,确认切换到单规则模式?(注意:当更新匹配模式之后只有重启机器才会生效!)') : this.$t('多规则匹配模式下,数据包命中某条策略后,若为无效处理方式,后续策略继续匹配,确认切换到多规则模式?(注意:当更新匹配模式之后只有重启机器才会生效!)')
      this.$confirm(info, this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        changeRuleMode({ mode: data }).then(res => {
          if (res.status === 0) {
            const msg = '当前' + (data === 'singlerule' ? '单' : '多') + '规则模式'
            this.$messages.success(this.$t(msg))
            this.listData()
          }
        })
      }).catch(() => {
        this.RuldType = this.RuldType === 'singlerule' ? 'multiplerule' : 'singlerule'
        const msg = '当前' + (this.RuldType === 'singlerule' ? '单' : '多') + '规则模式'
        this.$messages.info(this.$t(msg))
      })
    },
    changeUnmatchMode (data) {
      changeUnmatchMode({ matchlog: data }).then(res => {
        if (res.status === 0) {
          this.$messages.success(res.msg)
        }
      }).catch(() => {
        this.UnmatchType = this.UnmatchType === 'on' ? 'off' : 'on'
        this.$messages.info( this.$t('未命中日志' + (this.UnmatchType === 'on' ? '开' : '关')))
      })
    },
    reloadPolicyMessage () {
      reloadPolicyShow().then(res => {
        if (res.info && res.info[0] && res.info[0].reload === 'yes') {
          if (!this.rePolicyInstance) {
            this.rePolicyInstance = this.$notify.warning({
              title: this.$t('信息'),
              message: this.$t('安全引擎策略发生变化，请重载引擎后生效'),
              position: 'bottom-right',
              offset: 0,
              duration: 0,
              onClose: this.faultClose
            })
          }
        } else if (res.info[0].reload === 'no') {
          if (this.rePolicyInstance) {
            this.rePolicyInstance.close()
            this.rePolicyInstance = null
          }
        }
      }).catch(e => {
        if (this.timer) {
          clearInterval(this.timer)
        }
      })
    },
    faultClose (val) {
      this.faultText = ''
      this.rePolicyInstance = null
    },
    openTip () {
      this.$confirm(this.$t('安全引擎策略发生变化，是否立即重载安全引擎'), this.$t('提示'), {
        confirmButtonText: this.$t('立即重载'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        this.nowRePolicy()
      })
    },
    nowRePolicy () {
      reloadPolicy().then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t('重载成功'))
          this.listData()
        }
      })
    }
  }
}
</script>
